<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>ColorPalette Test</title>

	<style type="text/css">
		@import "../../dojo/resources/dojo.css";
		@import "css/dijitTests.css";
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/tundra/tundra.css">

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../dojo/dojo.js"
		djConfig="parseOnLoad: true, isDebug: true, extraLocale: ['en-us', 'es-mx']"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="_testCommon.js"></script>

	<script language="JavaScript" type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.ColorPalette");
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them

		var palette;
		dojo.addOnLoad(function(){
            var date0 = new Date();
            palette = new dijit.ColorPalette({palette: "7x10", id: "prog"}, dojo.byId("programPalette"));
            console.log("creation time for 7x10 palette: " + (new Date() - date0) );
        });

		function setColor(color){
			var theSpan = dojo.byId("outputSpan");
			theSpan.style.color = color;
			theSpan.innerHTML = color;
		}
	</script>
</head>

<body class="tundra">

	<h1 class="testTitle">dijit.ColorPalette test:</h1>

	<p>Large color palette (7x10), English tooltips:</p>
	<input id="beforeBig" value="for tabIndex testing">
	<div dojoType="dijit.ColorPalette" id="big" onChange="setColor(this.value);"></div>
	Test color is: <span id="outputSpan"></span>.
	<input id="afterBig" value="for tabIndex testing">

	<p>Small color palette (3x4), Spanish tooltips:</p>
	<input id="beforeSmall" value="for tabIndex testing">
	<div dojoType="dijit.ColorPalette" id="small" palette="3x4" lang="es-mx"></div>
	<input id="afterSmall" value="for tabIndex testing">

	<p>Default color palette (7x10) created programatically:</p>
	<div id="programPalette"></div>

</body>
</html>
